import {View, Text} from "@tarojs/components";
import http from "@/request";
import React, {useEffect, useImperativeHandle} from "react";
import {messageType} from "@/pages/message/type";
import { Button } from "@taroify/core";
import {ToPage} from "@/utils";
import "./index.scss"

const Message= React.forwardRef((_, ref) => {
    const [messages, setMessages] = React.useState<messageType[]>([]);
    const [total, setTotal] = React.useState<number>(0);

    const getList = () => {
        http.post('/disp/biz/message/page', {
            pageNum: 1,
            pageSize: 10,
            status: 'Unread'
        }).then((res) => {
            setMessages(res.data.list);
            setTotal(res.data.total);
            // readAll()
        })
    }

    useImperativeHandle(ref, () => ({
        getList
    }))

    const toMessage = () => {
        ToPage('/pages/message/index')
    }

    useEffect(() => {
        getList()
    }, []);

    return (<View className="notification-bar">
        <View className="notification-header">
            <Text className="notification-title">消息通知</Text>
            <Text className="notification-badge">{total}条未读</Text>
            <View className="flex1"></View>
            <Button variant="text" color="primary" onClick={toMessage}>
                <Text>更多</Text>
                <Text className="iconfont icon-base-right"></Text>
            </Button>
        </View>
        {
            messages.map(message => {
                return (
                    <View key={message.id} className="notification-item" >{message.msgContent}</View>
                )
            })
        }
    </View>)
})
export default Message